<script>

import LayoutComponent from '@/components/LayoutComponent.vue'

export default {
  name: 'TimelineView',
  components: { LayoutComponent },
  data () {
    return {
      timelineList: [],
      pageInfo: {}
    }
  },
  methods: {
    getTimeline () {
      this.$axios.get('api/timeline').then(data => {
        this.timelineList = [...data]
        /* 封装分页对象，格式如下：
        * {2025:2,2024:1}
        *
        *  */
        for (const d of data) {
          this.pageInfo[d.name] = 1
        }
      }).catch(e => e)
    },
    getBlogPage (year) {
      this.pageInfo[year]++
      this.$axios.get(`api/timeline/${year}/${this.pageInfo[year]}`).then(data => {
        for (let i = 0; i < this.timelineList.length; i++) {
          if (year === this.timelineList[i].name) {
            this.timelineList[i].blogList.push(...data)
            break
          }
        }
      })
    },
    close (year) {
      this.pageInfo[year] = 1
      for (let i = 0; i < this.timelineList.length; i++) {
        if (year === this.timelineList[i].name) {
          this.timelineList[i].blogList.splice(3)
          break
        }
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.getTimeline()
    })
  }
}
</script>

<template>
<layout-component :active-index="3">
  <el-timeline>
    <el-timeline-item v-for="(timeline,index) in timelineList" :key="timeline.name" :timestamp="timeline.name+' (共 '+timeline.count+' 条)'" placement="top" :type="index === 0 ?'success':'warning'" size="large">
        <el-card v-for="blog in timeline.blogList" :key="blog.blogId">
          <router-link :title="blog.title" style="color: black;text-decoration: underline" :to="`blog/${blog.blogId}`"><h4>{{ blog.title }}</h4></router-link>
          <div style="display: flex;align-items: center;justify-content: space-between">
            <p>发表时间：{{blog.applyTime}}</p>
            <p>浏览量：{{blog.readCount}}</p>
          </div>
        </el-card>
      <div style="display: flex;justify-content: end;align-items: center">
        <el-button v-if="timeline.blogList.length < timeline.count" type="text" @click="getBlogPage(timeline.name)">加载更多...</el-button>
        <el-button v-if="timeline.blogList.length === timeline.count && timeline.count>3" type="text" @click="close(timeline.name)">收起</el-button>
      </div>
    </el-timeline-item>
  </el-timeline>
</layout-component>
</template>

<style scoped lang="scss">

</style>
